<template>
  <div>
      <h3>Message</h3>
      <ul>
          <li v-for="message in messages" :key="message.id">
              <router-link :to="`/about/message/detail/${message.id}`">{{message.title}}</router-link>
          </li>
      </ul>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data(){
      return {
          messages:[]
      }
  },
  mounted(){
      setTimeout(()=>{
          this.messages=[
              {id:1,title:'message--title-1'},
              {id:2,title:'message--title-2'},
              {id:3,title:'message--title-3'},
          ]
      },1000)
  }
}
</script>

<style  scoped>

</style>
